<template>
  <div class="order-item">
    <div class="header">
      <div class="left">
        <div style="display: inline">
          <el-tag
            type="untreated"
            effect="dark"
            class="order-status-tag"
          >
            未处理
          </el-tag>
        </div>
        <div class="order-no">
          #{{order.orderId}} 丨{{ order.createDate }}
        </div>
      </div>
      <div class="right">
        <div class="buyer">
          Luis Miguel Vargas Salinas
        </div>
      </div>
    </div>

    <div class="content">

      <div
          class="item"
          v-for="(orderGoods,index) in order.orderGoods"
          :key="index"
          v-show="isExpand || index === 0"
      >
        <div class="label checkbox">
          <template v-if="index === 0">
            <el-checkbox></el-checkbox>
          </template>
        </div>
        <div
          class="label expand "
          :class="{'expand--active':isExpand}"
        >
          <template v-if="index ===  0 && !order.singleItem">
            <div style="width: 100%;height: 100%" @click="expand($event)">
              <i class="el-icon-arrow-right" ></i>
            </div>
          </template>
        </div>
        <div class="cell img">
          <template v-if="isExpand">
            <div class="img-box img-one">
              <img :src="orderGoods.image"  alt="">
            </div>
          </template>
          <template v-else>
            <div class="img-box"
                 :class="{
              'img-one': order.singleItem
            }"
            >
              <img :src="_orderGoods.image" v-for="(_orderGoods,_index) in order.orderGoods" :key="_index"  alt="">
            </div>
          </template>

        </div>
        <div class="cell goods-info">
          <p class="listing">{{ orderGoods.goodsId }}</p>
          <p class="title hidden-1">
            {{ orderGoods.goodsTitle }}
          </p>
          <p class="skuId">
            SKU：{{ orderGoods.sku }}
          </p>
          <p class="sku">
            Color: Black | Size: S
          </p>
        </div>
        <div class="cell price center">
          <template v-if="isExpand || order.singleItem">
            <p class="price-mxn">
              <span class="currency">MXN $ </span>
              <span class="price-num">{{ orderGoods.amount || 0}}</span>
            </p>
          </template>

        </div>
        <div class="cell num center">
          <p>数量：</p>
          <template v-if="isExpand">
            <span>{{orderGoods.num}}</span>
          </template>
          <template v-else>
            <span>{{order.num}}</span>
          </template>
        </div>
        <div class="cell operate">
          <template v-if="index === 0">
            <el-button>查看订单</el-button>
            <el-button>下载面单</el-button>
          </template>
        </div>
      </div>


    </div>

  </div>
</template>

<script>

import {getCountryIcon} from "@/utils/common";
import ignoreOrder from "@/views/order/components/IgnoreOrder";

export default {
  name: "OrderItem",
  props:{
    order:{
      required:true,
      type: Object,
    },
  },
  components:{
    ignoreOrder,
  },
  data(){
    return {
      getCountryIcon,
      isExpand: false,

    }
  },
  methods:{
    expand(e){
      this.isExpand = !this.isExpand;
    }
  }
}
</script>

<style scoped lang="scss">
.order-item{
  min-height: 150px;
  width: 100%;
  padding: 10px 10px;
  border-radius: 4px;
  border: 1px solid #e6ebf5;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .header{
    font-size: 13px;

    display: flex;
    justify-content: space-between;
    .order-no{
      display: inline-block;
      font-weight: bold;
      margin-left: 20px;
    }
  }
}
.order-status-tag{
  font-weight: bold;
}
.content{
  .item{
    p{
      margin: 0;
      padding: 0;
    }
    font-size: 13px;
    display: flex;
    margin: 5px 0;
    .checkbox{
      text-align: center;
      width: 50px;
      line-height: 100px;
    }
    .expand{
      position: relative;
      color: #666;
      font-size: 12px;
      width: 20px;
      height: 20px;
      text-align: center;
      margin-right: 3px;
      top: 43px;
      cursor: pointer;
    }
    .expand--active{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
      left: -2px;
    }
    .img{
      width: 100px;
      height: 100px;
    }
    .center{
      text-align: center;
    }
    .goods-info{
      line-height: 20px;
      width: 600px;
      .listing{
        font-weight: 650;
        font-size: 13px;
        color: #555555;
      }
      .title{
        font-weight: 500;
        color: #AAAAAA;
      }
      .skuId{
        font-weight: 500;
        color: #555555;
      }
      .sku{
        font-weight: 400;
        color: #7F7F7F;
      }
    }
    .img-box{
      width: 90px;
      height: 90px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 3px;
      background-color: #eee;
      border-radius: 5px;

      img{
        width: 40px;
        height: 40px;
      }
    }
    .img-one {
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      img{
        width: 80px;
        height: 80px;
      }
    }
    .price{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 500;
      p{
        margin: 5px auto;
      }
      .currency{
        color: #AAAAAA;
      }
      .price-num{
        color: #009C46;
      }
    }
    .num{
      min-width: 120px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-weight: 600;
      .text{
        color: #AAAAAA;
      }
      .number{
        color: #FC6347;
      }
    }
    .operate{
      margin-left: auto;
      min-width: 300px;
      line-height: 100px;
      text-align: right;
    }
    .is-right{
      text-align: right;
    }
  }

}
</style>
